<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    .header input {
        width: 80%;
        padding-left: 5%;
        background-color: rgb(176, 191, 204);
        border: 0px;
        height: 35px;
        /* line-height: 40px; */
        border-radius: 8px;
    }
    
    .header {
        margin: 10px;
        display: flex;
        /* width: 100%; */
        height: 35px;
        line-height: 40px;
        justify-content: space-around;
        background-color: aqua;
    }
    
    .complete {
        display: flex;
        justify-content: space-around;
    }
    
    .complete span {
        /* height: 10; */
        background-color: rgb(39, 196, 149);
        padding: 3px 10px;
        border-radius: 4px;
        color: white;
    }
    
    .todo {
        margin: 10px 20px;
        font-weight: 700;
    }
    
    .list {
        line-height: 40px;
        margin: 10px;
        height: 40px;
        color: white;
        background-color: rgb(31, 105, 105);
    }
    
    .list span {
        margin-left: 10px;
    }
    
    .list .del {
        float: right;
        margin-right: 10px;
    }
    
    .todolist {
        text-align: center;
    }
</style>

<body>
    <div id="app">
        <div class="header">
            <input type="text" placeholder="输入任务名称" v-model="Name">
            <span @click="addlist">新增</span>
        </div>
        <div class="complete">
            <span>全部任务({{list.length}})</span>
            <span>已完成({{list.length-unfinsh}})</span>
            <span>未完成({{unfinsh}})</span>
        </div>
        <div class="todo">任务列表</div>
        <div class="todolist" v-if="list.length==0">好寂寞,快来添加任务~</div>
        <div v-else>

            <div class="list" v-for="(item,index) in list">
                <span><input @click="changeStatus(item)" type="checkbox" :checked="item.status"> </span>
                <span>{{item.id}}</span>
                <span>{{item.name}}</span>
                <span @click="deleted(index)" class="del">删除</span>
            </div>
        </div>
    </div>
    <script src="vue-2.5.21.js"></script>
    <script src="todolist.js"></script>
</body>

</html>